{%extends file="common/page/layout.tpl"%}
{%block name="block_head_static"%}
    {%require name="home:static/userqueue/userqueue.less"%}
    {%require name="home:static/userqueue/userqueue.js"%}
{%/block%}

{%block name="content"%}
    {%widget name="home:widget/menu/menu.tpl" call="menu" active="tradequeue"%}
    <div class="home-userqueue">
        <section class="userqueue-header">
            <div class="header-content">
                <div class="data-type item1" >
                    <i></i>
                    <div class="data-value">￥{%$money.self_total%}</div>
                    <div class="data-name">我的排队金额</div>
                </div>
                <div class="data-type item2">
                    <i></i>
                    <div class="data-value">￥{%$money.total%}</div>
                    <div class="data-name">总的排队金额</div>
                </div>
                <div class="data-type item3">
                    <i></i>
                    <div class="data-value">{%$people.total%}</div>
                    <div class="data-name">当前排队人数</div>
                </div>
            </div>
        </section>
        {%if $money.total>0%}
        <div style="width:1000px;margin:0 auto;">
            <section>
                <h2 class="userqueue-title">
                    <span>排队资金</span>
                    <a href="#explain">为什么会有排队资金？</a>
                </h2>
                <div class="queue-container">
                    <div class="queue-money">
                        <div class="queue-content">
                            <div class="queue-type">排队资金</div>
                            <div class="queue-data-bar">
                                {%foreach $money.money_list as $k => $item%}
                                    <span class="data-item data-{%$item["type"]%}"
                                          data-type="{%$item["type"]%}-money"
                                          data-value="{%$item["value"]%}"
                                          data-wait-day="{%$item["wait_day"]%}"
                                          data-center="{%$item["center"]%}"
                                          style="width:{%$item["rate"]%}%;left:{%$item["left"]%}%;"></span>
                                {%/foreach%}
                            </div>
                        </div>
                        <div style="height: 15px;"></div>
                        <div class="progress">
                            <div class="progress-content">
                                {%if $queue_time.days.tomorrow%}
                                    <div class="tomorrow" style="width:{%$queue_time.days.tomorrow*7%}px;">
                                        <div class="day-bg"></div>
                                        <div class="day-text">明天</div>
                                    </div>
                                {%/if%}
                                {%if $queue_time.days.after_tomorrow%}
                                    <div class="after-tomorrow" style="width:{%$queue_time.days.after_tomorrow*7%}px;">
                                        <div class="day-bg"></div>
                                        <div class="day-text">后天</div>
                                    </div>
                                {%/if%}
                                {%if $queue_time.days.more%}
                                    <div class="more-day"></div>
                                {%/if%}
                            </div>
                        </div>
                    </div>
                    <div class="queue-people">
                        <div class="queue-content">
                            <div class="queue-type">排队人数</div>
                            <div class="queue-data-bar">
                                {%foreach $people.people_list as $k => $item%}
                                <span class="data-item data-{%$item["type"]%}"
                                      data-type="{%$item["type"]%}-people"
                                      data-value="{%$item["value"]%}"
                                      data-center="{%$item["center"]%}"
                                      style="width:{%$item["rate"]%}%;left:{%$item["left"]%}%;">{%if $item["rate"]>5%}{%$item["value"]%}人{%/if%}</span>
                                {%/foreach%}
                            </div>
                        </div>
                    </div>
                    <div class="explain">
                        <div class="self-explain">
                            <i class="self-explain-icon"></i>
                            <span>当前我的位置</span>
                        </div>
                        <div class="other-explain">
                            <i class="other-explain-icon"></i>
                            <span>其他用户的位置</span>
                        </div>
                    </div>
                </div>
            </section>
            <section class="estimate">
                <div class="estimate-content">
                     <div class="self-time">
                         <span>预估我的排队时间</span>
                         <span class="data self-data">{%$queue_time.wait_day%}</span>
                         <span>天</span>
                     </div>
                    <div class="average-time">
                        <span>预估平均排队时间</span>
                        <span class="data average-data">{%$queue_time.avg_wait_day%}</span>
                        <span>天</span>
                    </div>
                </div>
            </section>
        </div>
       {%else%}
           <section class="noqueue-tip">
               <a href="/user/buydemand">
                   <img src="../static/userqueue/image/no-queue-tip.png">
               </a>
           </section>
       {%/if%}
        <section class="queue-explain">
            <a name="explain"></a>
            <div class="explain-text">
                <h3>为什么会有排队资金？</h3>
                <p>当真融宝的债权组合份额被热情的用户买光了，后来的用户的购买只能在这里进行排队，当次日真融宝有新增份额后，系统会按照排队的顺序为用户进行自动交易。排队的时间取决于当前排队用户的数量和排队资金的总额。我们也会为排队用户预估大概的排队时间。请排队的用户耐心等待</p>
            </div>
            <a name="repeat"></a>
            <div class="explain-text" style="margin-top:30px;">
                <h3>为什么会有50元的排队资金？</h3>
                <p>为了给真融宝用户带来更多的优惠，当您的投资收益分别达到50元／100元／150元等50元的整数倍时，系统将自动帮您复投，让您享受复利带来的更多收益。</p>
            </div>
        </section>
    </div>

{%/block%}

